﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <link rel="stylesheet" href="static/css/form.css">
    <link rel="stylesheet" href="static/css/zdate.css">
</head>

<body style="z-index: 2;">
    <h4>表单集合</h4>
    <div class="z-form-item">
        <label class="z-form-label">单行输入框</label>
        <div class="z-form-block">
            <input class="z-form-ipt" type="text" placeholder="请输入内容">

        </div>
    </div>
    <div class="z-form-item" style="width: 300px;">
        <label class="z-form-label">选择日期</label>
        <div class="z-form-block">
            <input class="z-form-ipt tim" type="text" placeholder="请输入内容">
        </div>
    </div>
    <div class="z-form-item">
        <label class="z-form-label">开关</label>
        <div class="z-form-block">
            <input type="checkbox" z-text="OFF|ON" checked class="z-input-beautiful">
        </div>
    </div>
    <div class="z-form-item">
        <label class="z-form-label">开关</label>
        <div class="z-form-block">
            <input type="checkbox" z-text="吃饭|睡觉" class="z-input-beautiful">
        </div>
    </div>
    <div class="z-form-item">
        <label class="z-form-label">开关</label>
        <div class="z-form-block">
            <input type="checkbox" z-text="一起去吃饭|一起去睡觉" class="z-input-beautiful">
        </div>
    </div>
</body>
<script src="static/js/jquery-1.10.2.js"></script>
<!-- <script src="static/js/form.js"></script> -->
<!-- <script src="static/js/zdate.js"></script> -->
<script src="static/js/form.js"></script>
<script>
    // $('.tim').showTimeSelect({
    //     type: 'datetime'
    // })
    ZUI.showTimeSelect({
        type: 'datetime',
        selector: '.tim'
    })
    ZUI.circuit()
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</html>